<template>
    <div>
        <nav-bar>
            <template v-slot:default>
                我的收藏
            </template>
        </nav-bar>
        <div class="collect">
            <van-card @click="itemClick" v-for="(item,index) in collect" :key="index"
                :price="item.goods.price+'.00'"
                :desc="item.goods.description"
                :title="item.goods.title"
                :thumb="item.goods.cover_url"
            />
        </div>
    </div>
</template>

<script>
    import NavBar from '@/components/common/navbar/NavBar.vue';
    import { getCollect } from '@/network/collect';
    import { onMounted, reactive, toRefs } from 'vue';
    import { useRouter } from 'vue-router';
    export default{
        name:"Collect",
        components:{
            NavBar
        },
        setup(){
            const state = reactive({
                collect:{}
            })
            const router = useRouter();
            onMounted(()=>{
                getCollect().then(res=>{
                    state.collect = res.data;
                    console.log(res.data);
                })
            })
            return{
                ...toRefs(state),
                itemClick:(id)=>{
                    state.collect.forEach(item => {
                        id = item.goods.id;
                        router.push({path:'/detail', query:{id:id}});
                    })
                }
            }
        }
    }
</script>

<style scoped>
.collect{
    margin-top: 50px;
    text-align: left;
    padding: 10px;

}
.van-card{
    background-color: white;
}
</style>